<script>
const MIN_NO = 1
export default {
  name: 'TrTable',
  props: {
    columns: Array,
    data: Array,
    filterWidth: Number,
    selection: Boolean,
    selectionWidth: Number
  },
  data () {
    return {
      checkList: [],
      min: 0
    }
  },
  watch: {
    columns: {
      immediate: true,
      handler (newVal) {
        if (newVal) {
          this.checkList = newVal.filter(v => !v.unchecked).map(v => v.label)
          this.min = MIN_NO + newVal.filter(d => d.hidden).length
        }
      }
    }
  },
  render (h) {
    const columns = this.columns.filter(v => this.checkList.includes(v.label))
    return (
      <el-table data={this.data} tooltip-effect="light" border={true} on-selection-change={(val) => this.selectionValue(val)}>
        {
          this.selection ? <el-table-column type="selection" fixed width={this.selectionWidth || 55} key={new Date().getTime()}></el-table-column>
            : <el-table-column key={new Date().getTime()} fixed type="index" />
        }
        {columns.map(column => (
          <el-table-column
            label={column.label}
            scopedSlots={{
              default: value => {
                const row = value.row
                const prop = column.prop
                console.log(this)
                let data = Object.assign(
                  {},
                  column.formatter && column.formatter(prop, row)
                )
                let isArr = typeof data.label === 'object' && data.label != undefined
                const defaultpl = (
                  <div

                    on-click={() =>
                      column.handleClick && column.handleClick(row)
                    }
                    class={data.class || ''}
                  >
                    {
                      isArr ? data.label.map(v => (<p>{v}</p>)) : (data.label || row[prop])
                    }
                  </div>
                )
                const othertpl = (
                  <div>
                    {this.$scopedSlots[column.prop] &&
                      this.$scopedSlots[column.prop](value)}
                  </div>
                )
                return this.$scopedSlots[column.prop] ? othertpl : defaultpl
              }
            }}
          />
        ))}

        <el-table-column
          label="操作"
          width={this.filterWidth || 150}
          fixed="right"
          scopedSlots={{
            default: value => {
              return <div>{this.$scopedSlots.default && this.$scopedSlots.default(value)}</div>
            },
            header: () => {
              let filteredValue = this.columns.map(v => !v.hidden && v.label).filter(d => d)
              return (
                <div class="filter">
                  <span>操作</span>
                  <el-popover trigger="click" popper-class="m-filter">
                    <el-checkbox-group value={this.checkList} min={this.min}>
                      {filteredValue.map(v => (
                        <el-checkbox
                          on-change={d => {
                            this.updateCheckList(v, d)
                          }}
                          label={v}
                        />
                      ))}
                    </el-checkbox-group>
                    <el-tooltip
                      effect="light"
                      content="自定义列表项"
                      placement="top-start"
                      slot="reference"
                    >
                      <el-button class="icon">
                        <i class="iconfont icon-shezhi" />
                      </el-button>
                    </el-tooltip>
                  </el-popover>
                </div>
              )
            }
          }}
        />
      </el-table>
    )
  },
  methods: {
    updateCheckList (list, flag) {
      if (flag && !this.checkList.includes(list)) {
        this.checkList.push(list)
      } else {
        this.checkList = this.checkList.filter(d => d !== list)
      }
    },
    selectionValue (val) {
      this.$emit('selection-change', val)
    }
  }
}
</script>
<style lang="stylus" scoped>
.el-table--border
  border 0
  &:after
  &:before
    width 0
    height 0
  >>>
    th
      position relative
      font-size: 14px
      z-index 1
      overflow: visible
      border-right: 0
      color #2c3136
      border-bottom 3px solid #edeff3 !important
      &:after
        content: ''
        position: absolute
        right 0
        bottom: -5px
        height 10px
        width: 2px
        background: #ffffff
        z-index: 11
    td
      border-right 0
      padding: 4px 0
      font-size 12px
      .el-checkbox__input
        line-height: 12px !important
      .el-checkbox__inner
        height 14px !important
        line-height: 12px !important

.m-filter
  max-height 355px
  overflow auto
  .el-checkbox
    display block
    line-height: 23px
    &+.el-checkbox
      margin-left 0
      font-size: 12px
    .el-checkbox__label
      font-size: 12px
.popover-operation
  min-width 80px
.filter
  width 100%
  line-height 20px
  display inline
  div
    line-height 20px
  .icon
    position absolute
    right 0
    top 0
    cursor pointer
    width 20px
    height @width
    padding 0
    margin 0
    vertical-align middle
    i
      font-size 12px
    &:active
    &:focus
      background:#1f60bd
      color #fff
</style>
